<template>
	<div class="cvu-paginator">
		<div class="cvu-paginator-warp">
            <span class="cvu-paginator-font">共{{ total || 0 }}条</span>
            <span class="cvu-paginator-font">
                <Select
                    class="cvu-paginator-select"
                    v-model="size.model"
                    @on-change="_changeSelect()"
                >
                    <Option
                        v-for="item in size.option"
                        :value="item.key"
                        :key="item.key"
                    >{{ item.value + '条/页' }}</Option>
                </Select>
            </span>
            <span class="cvu-paginator-font" @click.stop="_changeClick('pre')"><Icon type="ios-arrow-back" /></span>
            <span class="cvu-paginator-font" @click.stop="_changeClick('next')"><Icon type="ios-arrow-forward" /></span>
            <span class="cvu-paginator-font">
                <span>前往</span>
                <input type="text" class="cvu-paginator-input" v-model="page" @keyup.enter="_enterPage(page)" @input="_changeInput(page)">
                <span>页</span>
            </span>
        </div>
	</div>
</template>

<script>
import common from '../../../until/common'
export default {
    name: 'cvu-paginator-mini',
    components: {},
    props: {
        // 当前页数
        currentPage: {
            type: Number,
            required: true
        },
        // 每页条数
        size: {
            type: Object,
            default() {
                return {
                    model: 10,
                    option: [
                        { key: 10, value: 10 },
                        { key: 50, value: 50 },
                        { key: 100, value: 100 },
                        { key: 200, value: 200 }
                    ]
                }
            }
        },
        // 总条数
        total: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            page: 1,
            pageTotal: 1
        }
    },
    watch: {
        // 观察page页码变化
        page: {
            handler(newVal) {
                this.pageTotal = Math.ceil(this.total / this.size.model)
            },
            immediate: true,
            deep: true
        },
        // 观察size每页大小变化
        size: {
            handler(newVal) {
                this.pageTotal = Math.ceil(this.total / this.size.model)
            },
            immediate: true,
            deep: true
        },
        // 观察currentPage当前页配置变化
        currentPage: {
            handler(newVal) {
                this.page = ~~newVal
            },
            immediate: true,
            deep: true
        },
        // 观察total总条数变化
        total: {
            handler(newVal) {
                this.pageTotal = Math.ceil(this.total / this.size.model)
            },
            immediate: true,
            deep: true
        }
    },
    methods: {
        // 按钮点击监听
        _changeClick(code) {
            switch (code) {
            case 'first': // 首页
                this.page = 1
                this.$emit('on-change', {
                    page: this.page
                })
                break;
            case 'pre': // 上一页
                if(this.page > 1) {
                    this.page = ~~this.page - 1
                    this.$emit('on-change', {
                        page: this.page
                    })
                }
                break;
            case 'next': // 下一页
                if(this.page < this.pageTotal) {
                    this.page = ~~this.page + 1
                    this.$emit('on-change', {
                        page: this.page
                    })
                }
                break;
            case 'last': // 尾页
                this.page = this.pageTotal
                this.$emit('on-change', {
                    page: this.page
                })
                break;
            default:
                break;
            }
        },
        // 选择每页条数大小
        _changeSelect() {
            this.page = 1
            this.$emit('on-change-size', {
                size: this.size.model
            })
        },
        // 输入监听 (控制输入数字的不小于0,不大于最大页码)
        _changeInput(value) {
            if(~~value > this.pageTotal) {
                this.page = this.pageTotal
            }
            if(~~value > 0 && ~~value <= this.pageTotal) {
                this.page = ~~value
            }
            if(~~value < 0) {
                this.page = 1
            }
        },
        // 回车键页码跳转
        _enterPage(value) {
            this.page = ~~value
            this.$emit('on-change', {
                page: this.page
            })
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../../style/_index.scss';
.cvu-paginator{
    display: inline-block;
    text-align: right;
    height: 50px;
    line-height: 50px;
    .cvu-paginator-warp{
        display: flex;
        align-items: center;
        .cvu-paginator-font{
            margin-left: 10px;
            cursor: pointer;
            color: #999;
            font-size: 12px;
            user-select: none;
            i{
                font-size: 16px;
                transition: color .2s;
            }
        }
        .cvu-paginator-input {
            display: inline-block;
            width: 50px;
            height: 24px;
            line-height: 1.5;
            margin: 0 5px;
            padding: 4px 7px;
            background-color: #fff;
            border: 1px solid #dcdee2;
            border-radius: 4px;
            cursor: text;
            user-select: none;
            outline: none;
            -webkit-transition: border .2s ease-in-out,background .2s ease-in-out,-webkit-box-shadow .2s ease-in-out;
            transition: border .2s ease-in-out,background .2s ease-in-out,box-shadow .2s ease-in-out,-webkit-box-shadow .2s ease-in-out;
            color: #515a6e;
            font-size: 12px;
        }
        /deep/.ivu-select.cvu-paginator-select {
            position: relative;
            top: -1px;
            width: 90px;
            .ivu-select-selection {
                height: 24px;
                line-height: 23px;
                border: 1px solid #D7D8DF;
                color: #515a6e;
                font-size: 12px;
            }
            .ivu-select-placeholder,
            .ivu-select-selected-value {
                height: 24px;
                line-height: 23px;
                text-align: center;
                font-size: 12px;
                &.ivu-select-selected-value{
                    color: #515a6e;
                    font-size: 12px;
                }
            }
            .ivu-select-arrow{
                top: 51%;
                right: 6px;
            }
        }
    }
}
</style>
